<template>
	<a-divider>{{ $t('login.signInOther') }}</a-divider>
	<div class="login-oauth layout-center">
		<a-space align="start">
			<!-- <a @click="getLoginRenderUrl('gitee')"><GiteeIcon /></a> -->
			<a-button type="primary" shape="circle" @click="showQr()">
				<wechat-filled />
			</a-button>
			<!-- https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket= -->
		</a-space>
	</div>
	<a-modal v-model:visible="qrVisible" width="360px" title="扫码登录" @ok="handleOk" :footer="null">
		<div><info-circle-outlined style="color: red;" /><span>5分钟失效</span></div>
		<img :src="gzhQrUrl" alt="" style="width: 260px;margin-left: 24px">
    </a-modal>
</template>

<script setup name="threeLogin">

	import thirdApi from '@/api/auth/thirdApi'

    const qrVisible = ref(false);
    const gzhQrUrl = ref();
	// 使用 setTimeout 创建一个定时器
	let timer = setInterval(() => {
		thirdApi.gzhQrUrl().then((data) => {
			console.log(data)
			if(data){
				gzhQrUrl.value = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket="+data
				qrVisible.value = true
			}
		})
	}, 1000*20);
 
	// 清除定时器
	clearTimeout(timer);
	const getLoginRenderUrl = (platform) => {
		const param = {
			platform: platform
		}
		thirdApi.thirdRender(param).then((data) => {
			window.location.href = data.authorizeUrl
		})
	}
	const showQr = () => {
		thirdApi.gzhQrUrl().then((data) => {
			console.log(data)
			if(data){
				gzhQrUrl.value = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket="+data
				qrVisible.value = true
			}
		})
	}
	const handleOk = () => {
		// const param = {
		// 	platform: platform
		// }
		// thirdApi.thirdRender(param).then((data) => {
		// 	window.location.href = data.authorizeUrl
		// })
	}
	onBeforeUnmount(() => {
		clearInterval(timer);
	})

</script>
